<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" href="css/general.css" type="text/css">
<title>L33T - Digital Books</title>

<script src="http://code.jquery.com/jquery-latest.js"
	type="text/javascript"></script>
</head>
<body>

	<div class="div_header">
		<br> <br> <label style="padding-left: 15px;">Digital
			Books</label> <br> <br>
	</div>
	<div class="div_line"></div>

	<div>
		<div id="content">
			<div id="head-wrapper">
				<div id="head">
					<h1>Shopping Cart</h1>
				</div>
			</div>
			<div class="message flash_notice">
				<p>Digital Books - Add book</p>
			</div>
		</div>
		<div class="divAddBook divBookToAddContainer">
			<input type="hidden" id="hdnBookId" value="B001" />
			<div class="divBookToAddContainerLeft">
				<img src="${model.book.imageUrl}" id="imgBook"
					style="max-height: 100px; max-width: 100px" />
			</div>
			<div class="divBookToAddContainerRight">
				<div>
					Title: <span id="spnTitle">${model.book.title}</span>
				</div>
				<div>
					Author: <span id="spnAuthor">${model.book.author}</span>
				</div>
				<div>Quantity</div>
				<div>
					<select id="cboQuantity" name="cboQuantity">
						<option value="1">1</option>
						<option value="2">2</option>
						<option value="3">3</option>
						<option value="4">4</option>
						<option value="5">5</option>
						<option value="6">6</option>
						<option value="7">7</option>
						<option value="8">8</option>
						<option value="9">9</option>
					</select> <input type="button" value="Update" class="update-cart-button"
						id="btnUpdate" name="btnUpdate" /> $<span id="spnPrice">
						${model.book.price} </span>
				</div>
			</div>
			<div class="clearer"></div>
		</div>

		<div class="divAddBook divAddBookBottomRow">
			<div class="addBookPrice1">Total:</div>
			<div id="divTotalPrice" class="addBookPrice2">
				$<span id="spnTotal">${model.total}</span>
			</div>
			<div class="clearer"></div>
		</div>

		<div class="divAddBook divAddBookBottomRow">
			<input type="button" id="btnContinueShopping"
				name="btnContinueShopping" class="" value="Continue Shopping" />
		</div>

		<div class="divAddBook divAddBookBottomRow">
			<input type="button" id="btnCheckOut" name="btnCheckOut" class=""
				value="Check Out Now" onclick="javascript:purchaseNow();" />
		</div>

		<div id="divCartAppender" class="message flash_notice">
			<p>Added to Car</p>
		</div>

		<c:forEach var="book" items="${model.lstBooks}">

			<div class="divAddBook divBookToAddContainer">
				<div class="divBookToAddContainerLeft">
					<img src="${book.imageUrl}" id="${book.isbn}imgBook"
						style="max-height: 80px; max-width: 80px" />
				</div>
				<div class="divBookToAddContainerRight">
					<div id="price">Title: ${book.title}</div>
					<div>Author: ${book.author}</div>
					<div>Price: ${book.price}</div>
					<div>Quantity: ${book.quantity}</div>
				</div>
				<div class="clearer"></div>
			</div>
			<br />

		</c:forEach>
	</div>
	<div class="flash_notice">
		<p>Total Books</p>
	</div>
	<script type="text/javascript">
		$(document).ready(function() {
			$("#btnUpdate").click(function() {
				var bookId = $("#hdnBookId").val();
				var quantity = $("#cboQuantity").val();
				var price = $.trim($("#spnPrice").html());
				var title = $.trim($("#spnTitle").html());
				var author = $.trim($("#spnAuthor").html());
				var imageUrl = $.trim($("#imgBook").attr("src"));

				var totalPrice = parseFloat($.trim($("#spnTotal").html()));

				$("#spnPrice").html(parseFloat(quantity) * parseFloat(price));
				$("#spnTotal").html(totalPrice + (parseFloat(quantity) * parseFloat(price)));
				$.ajax({
						url : 'addbooktocart.htm',
						type : 'POST',
						dataType : 'json',
						data : 'isbn='+ bookId+ '&title='+ title+ '&author='+ author+ '&imageUrl='+ imageUrl+ '&quantity='+ quantity+ '&price='+ price,
						success : function(data) {
							alert("The book was successfully added to your shopping cart");
							AddToCartHtml(bookId,imageUrl,title,author,price,quantity);
						},
						error : function(data) {
							alert("OH GOD WHY?");
						}
					});
			});

			$("#btnContinueShopping").click(function() {
				window.location.href = "main_view.htm";
			});

			$("#btnCheckOut").click(function() {
				window.open("purchase.htm","pago","left=20,top=20,width=410,height=340,toolbar=0,resizable=0");
			});

		});

		function AddToCartHtml(isbn, imageUrl, title, author, price, quantity) {

			var html = '<div class="divAddBook divBookToAddContainer">'
					+ '<div class="divBookToAddContainerLeft">'
					+ '<img src="' + imageUrl + '" id="' + isbn + 'imgBook" style="max-height: 80px; max-width: 80px" />'
					+ '</div>' + '<div class="divBookToAddContainerRight">'
					+ '<div>Title: ' + title + '</div>' + '<div>Author: '
					+ author + '</div>' + '<div>Price: ' + price + '</div>'
					+ '<div>Quantity: ' + quantity + '</div>' + '</div>'
					+ '<div class="clearer"></div>' + '</div>' + '<br/>';

			$("#divCartAppender").after(html);

		}
	</script>

</body>
</html>